系列文章: 前端工程師的 Modern Web 實踐之道 - Day 1
預計閱讀時間: 12 分鐘
難度等級: ⭐⭐⭐☆☆
當我從 PHP + MySQL 的後端開發轉向前端領域時，眼前的景象讓我震撼不已。還記得 2015 年時，一個簡單的 jQuery + Bootstrap 組合就能解決大部分前端需求，但現在光是選擇一個前端框架就讓人眼花撩亂：
每個都聲稱自己是「Modern」的解決方案。
這讓我開始思考一個根本問題：什麼才是真正的 Modern Web？
作為一個曾經深耕後端開發的工程師，我有幸以不同的視角來觀察前端生態的演進。今天，我想和大家分享我對 Modern Web 的深度思考，以及接下來 30 天我們將一起探索的 Modern Web 開發實踐之路。
在這個時代，Web 開發相對單純：
<!DOCTYPE html>
<html>
<head>
<title>我的網站</title>
<style>
.container {
width: 800px;
margin: 0 auto;
}
.sidebar {
float: left;
width: 200px;
}
.content {
float: right;
width: 580px;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">導航選單</div>
<div class="content">主要內容</div>
</div>
<script>
// 偶爾來點 JavaScript 特效
document.getElementById('button').onclick = function() {
alert('Hello World!');
}
</script>
</body>
</html>
那時候的開發流程：
💡 特點：簡單直接，但功能有限
jQuery 的出現改變了一切，AJAX 讓網頁開始「活」起來：
// jQuery 時代的經典寫法
$(document).ready(function() {
$('#loadButton').click(function() {
$.ajax({
url: '/api/users',
type: 'GET',
dataType: 'json',
success: function(data) {
$('#userList').empty();
$.each(data, function(index, user) {
$('#userList').append('<li>' + user.name + '</li>');
});
},
error: function() {
alert('載入失敗！');
}
});
});
});
這個時代的特徵：
| 特徵 | 說明 |
|---|---|
| 🔄 SPA 概念萌芽 | 單頁應用開始出現 |
| 🎨 前端框架興起 | Backbone.js、AngularJS 登場 |
| 📱 響應式設計 | 移動端時代來臨 |
| 🛠️ 構建工具發展 | Grunt、Gulp 開始普及 |
Modern 前端開發已經發生質的變化：
// 現代 React 組件
import React, { useState, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
const UserList = () => {
const {
data: users,
isLoading,
error
} = useQuery({
queryKey: ['users'],
queryFn: () => fetch('/api/users').then(res => res.json())
});
if (isLoading) return <div>載入中...</div>;
if (error) return <div>載入失敗：{error.message}</div>;
return (
<ul>
{users?.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
};
export default UserList;
在深入探討什麼是 Modern Web 之前，我們先釐清一些常見的誤解：
Modern Web ≠ 使用最新的框架
很多開發者認為使用最新版本的 React 或 Vue 就是 Modern，但這是錯誤的。
⚠️ 實際案例：我見過用著 React 18 卻寫著 jQuery 風格代碼的專案，也見過用 PHP 但架構設計極其優雅的系統。
Modern Web ≠ 複雜化簡單問題
並非所有專案都需要：
💭 金句：過度工程化往往比技術落後更危險
Modern Web ≠ 拋棄所有傳統技術
作為一個從 PHP 轉到前端的開發者，我深知傳統技術的價值：
<?php
// PHP 在 Modern 架構中依然有價值
class UserController
{
public function getUsers(): JsonResponse
{
$users = User::with('profile')
->where('active', true)
->paginate(10);
return response()->json([
'data' => $users->items(),
'pagination' => [
'current_page' => $users->currentPage(),
'total_pages' => $users->lastPage(),
]
]);
}
}
?>
關鍵在於如何運用，而不是技術本身的新舊。
經過深度思考和實踐，我認為真正的 Modern Web 應該具備以下五個核心特徵：
Modern Web 開發的第一個標準是：開發是否快樂且高效？
# ❌ 傳統開發：啟動需要等待
$ npm start
Starting development server...
Webpack bundling... ████████████░░░░ 75%
# 可能要等 30 秒...
# ✅ Modern Web 開發：秒級啟動
$ npm run dev
Local: http://localhost:5173/
Ready in 324ms ⚡
好的開發體驗包括：
| 特徵 | 說明 | 工具範例 |
|---|---|---|
| ⚡ 快速啟動 | 秒級熱重載 | Vite, Webpack 5 |
| 🔍 智能提示 | 錯誤定位精確 | TypeScript, ESLint |
| 🤖 自動化 | 程式碼格式化 | Prettier, Husky |
Modern Web 不是為了技術而技術，而是為了更好的使用者體驗。
// ❌ 傳統做法：全部載入
import * as lodash from 'lodash';
// 📦 打包後體積：70KB
// ✅ Modern Web 做法：按需載入
import { debounce } from 'lodash-es';
// 📦 打包後體積：2.5KB (節省 96%)
關鍵性能指標：
| 指標 | 目標值 | 影響 |
|---|---|---|
| LCP (Largest Contentful Paint) | < 2.5s | 載入速度 |
| FID (First Input Delay) | < 100ms | 互動響應 |
| CLS (Cumulative Layout Shift) | < 0.1 | 視覺穩定性 |
// ✅ Modern Web 的組件設計
interface UserCardProps {
user: {
id: number;
name: string;
email: string;
role: 'admin' | 'user' | 'editor';
};
onEdit?: (userId: number) => void;
className?: string;
}
const UserCard: React.FC<UserCardProps> = ({
user,
onEdit,
className
}) => {
return (
<div className={`user-card ${className || ''}`}>
<h3>{user.name}</h3>
<p>{user.email}</p>
<span className={`role role--${user.role}`}>
{user.role}
</span>
{onEdit && (
<button onClick={() => onEdit(user.id)}>
編輯
</button>
)}
</div>
);
};
Modern Web 程式碼的特徵：
# .github/workflows/deploy.yml
name: Deploy to Production
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
- name: Install dependencies
run: npm ci
- name: Run tests
run: npm test
- name: Build application
run: npm run build
- name: Deploy to production
run: npm run deploy
Modern Web 工程實踐流水線：
程式碼提交 → 自動測試 → 程式碼品質檢查 → 自動建置 → 部署到生產環境 → 監控與告警
作為 Full-stack 開發者，我深知前後端協作的重要性：
{
"users": [
{
"id": 1,
"name": "張三",
"email": "zhangsan@example.com",
"profile": {
"avatar": "https://example.com/avatar1.jpg",
"department": "Engineering"
},
"permissions": ["read", "write"]
}
],
"pagination": {
"page": 1,
"totalPages": 10,
"hasNext": true
}
}
Full-stack 思維包括：
| 層面 | 考量重點 |
|---|---|
| 🔌 API 設計 | RESTful 原則，資料結構合理 |
| 🤝 團隊協作 | 前後端聯調，測試策略 |
| 🎯 產品思維 | 技術決策服務業務目標 |
| 📈 性能優化 | 全鏈路優化思維 |
想知道你的專案是否達到 Modern Web 標準？不妨用這個清單自我檢視：
💯 評分標準：
在接下來的 29 天裡，我將帶領大家深入探索 Modern Web 的各個面向：
Modern Web 不是一個終點，而是一種持續進化的思維方式。它不在於你使用了多新的技術，而在於你是否能夠：
🎯 以 User Experience 為中心思考問題
😊 以 Developer Experience 為出發點
🏗️ 以 Maintainability & Scalability 為長期目標
🤝 以 Team Collaboration 和知識傳承為責任
作為一個從傳統後端轉向 Modern Frontend 的開發者，我想說：
🌟 真正的 Modern Web，是讓技術服務於人，而不是讓人服務於技術。
iThome鐵人賽
看影片追技術